<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>角色管理</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/css/oksub.css}">
    <link rel="stylesheet" th:href="@{/layui_ext/dtree/dtree.css}">
    <link rel="stylesheet" th:href="@{/layui_ext/dtree/font/dtreefont.css}">
    <script type="text/javascript" th:src="@{/lib/loading/okLoading.js}"></script>
</head>
<body>
<div class="ok-body">
    <blockquote class="layui-elem-quote quoteBox">
        <form class="layui-form" lay-filter="searchForm">
            <div class="layui-inline">
                <a class="layui-btn layui-bg-cyan disRole">分配角色</a>
            </div>
        </form>
    </blockquote>
    <!--数据表格-->
    <table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>
</div>
<!--js逻辑-->
<script th:src="@{/lib/layui/layui.js}"></script>
<script th:inline="none">
    layui.extend({
        dtree: '/layui_ext/dtree/dtree'
    }).use(["element", "jquery", "table", "form", "laydate", "okLayer", "layer",
        "okUtils", "okMock","dtree"], function () {
        table = layui.table;
        form = layui.form;
        layer = layui.layer;
        laydate = layui.laydate;
        okLayer = layui.okLayer;
        okUtils = layui.okUtils;
        okMock = layui.okMock;
        $ = layui.jquery;
        dtree = layui.dtree;

        laydate.render({
            elem: "#startTime",
            type: "datetime"
        });
        laydate.render({
            elem: "#endTime",
            type: "datetime"
        });
        okLoading.close($);
        var userTable = table.render({
            elem: '#tableId',
            url: "/api/system/roleManage",
            limit: 20,
            page: true,
            id: "roleManage",
            toolbar: true,
            toolbar: "#toolbarTpl",
            size: "sm",
            cols: [[{
                type: "checkbox",
                fixed: "left"
            }, {
                field: "staffId",
                title: "员工编号",
                width: 250,
                sort: true
            }, {
                field: "name",
                title: "员工姓名",
                width: 300
            }, {
                field: "affiliatedNetworkName",
                title: "所属网点",
                width: 300
            }
            ]],
            done: function (res, curr, count) {
                console.info(res, curr, count);
            }
        });



        //角色分配
        $(".disRole").click(function() {
            var checkData = table.checkStatus('roleManage').data;
            console.log(checkData);
            if (checkData == null || checkData.length == 0) {
                layer.msg("请先选中需要分配员工", {
                    "icon" : 2
                });
                return;
            }
            class_layer = layer.open({
                type: 1,  //type:0 也行
                title: "选择角色",
                area: ["400px", "80%"],
                content: '<ul id="roleTree" class="dtree" data-id="0"></ul>',
                btn: ['确认选择'],
                success: function(layero, index){

                    var DTree = dtree.render({
                        obj: $("#roleTree"),
                        url: "/api/system/roleList",
                        dataStyle: "layuiStyle",  //使用layui风格的数据格式
                        dataFormat: "list", //配置data的风格为list
                        //checkbarType: "self"
                    });

                },
                yes: function(index, layero) {
                    var param = dtree.getNowParam("roleTree"); // 获取当前选中节点

                    var staff_ids = new Array();

                    for (var i = 0; i < checkData.length; i++) {
                        staff_ids.push(checkData[i].staffId);
                    }
                    console.log(param.nodeId);
                    console.log(param.nodeId);

                    $.get("/api/system/setRole", {
                        staffId: staff_ids.join(","),
                        roleId: param.nodeId
                    }, function (data) {
                        if (data.code == 200) {
                            layer.msg("设置成功", {"icon": 1});
                            userTable.reload(); //刷新表格数据（也即让table重新加载url）
                            layer.close(index);//关闭弹出框
                        } else {
                            layer.close(index);//关闭弹出框
                            layer.msg(data.msg, {
                                icon: 2
                            });
                        }
                    })
                }
            });

        })


    })
</script>


<!-- 行工具栏模板 -->
<script type="text/html" id="operationTpl">
</script>


</body>
</html>
